<template>
  <div class="mainDiv">
    <div class="leftDiv">
      <div class="leftTop">
        <EchartsDemo :arrWork="arrWork"></EchartsDemo>
      </div>
      <div class="leftBottom">
        <EchartsWea :weaImg="weaImg"></EchartsWea>
      </div>
    </div>
    <div class="centerDiv">
      <div id="main123" class="mapCss"></div>
    </div>
    <div class="rightDiv">
      <div class="rightTop">
        <EchartsGauge :pm25="pm25"></EchartsGauge>
      </div>
      <div class="rightBottom">
        <EchartsRadar :arrRadar="arrRadar"></EchartsRadar>
      </div>
    </div>
  </div>
</template>

<script>
import EchartsDemo from '../echarts/EchartsDemo.vue';
import EchartsGauge from '../echarts/EchartsGauge.vue'
import EchartsWea from '../echarts/EchartsWea.vue'
import EchartsRadar from '../echarts/EchartsRadar.vue'
import * as echarts from 'echarts';
import axios from 'axios'
export default {
  //注册模块
  components: { EchartsDemo, EchartsGauge, EchartsWea, EchartsRadar },
  data() {
    return {
      arrWork: {
        arrWeek: ['星期X', '星期X', '星期X', '星期X', '星期X', '星期X', '星期X'],
        arrTem1: [0, 0, 0, 0, 0, 0, 0],
        arrTem2: [0, 0, 0, 0, 0, 0, 0],
        title: '太原'
      },
      pm25: 0,
      weaImg: {},
      titleText: '太原市',
      arrRadar: []
    }
  },
  //vue挂在完成后执行的方法
  mounted() {
    this.getMapData()
    this.getTianQiDdata('太原')
  },
  //定义函数
  methods: {
    getMapData() {
      let _this = this
      //ajax请求
      axios.get('../../static/140.json')
        .then(function (response) {
          let mapJson = response.data
          //初始化echarts
          let myChart = echarts.init(document.getElementById("main123"))
          // console.log(mapJson)
          //初始化地图
          echarts.registerMap("临汾市", mapJson, {})
          let color = [
            "#fecb9a",
            "#fefdce",
            "#fefa7d",
            "#cdccfb",
            "#cdf99d",
            "#fdcdcc"
          ];
          //设置地图的参数
          var mapData = mapJson.features.map((item, index) => {
            return {
              name: item.properties.name,
              // value: 1000,
              level: item.properties.level,
              cityCode: item.properties.adcode,
              itemStyle: {
                normal: {
                  show: true,
                  areaColor: color[index] || "#ddd"
                }
              }
            };
          });
          let option = {
            title: {
              text: _this.titleText,
              left: 20,
              top: 20
            },
            series: [
              {
                name: "地图",
                zoom: 1.1,
                type: "map",
                mapType: "临汾市",
                aspectScale: 0.85, //地图长度比
                itemStyle: {
                  normal: {
                    show: true,
                    areaColor: "#031525"
                  }
                },
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                data: mapData
              }
            ]
          };
          myChart.setOption(option);
          myChart.on("click", function (params) {
            let nameNew = params.data.name + ''
            myChart.setOption({
              title: {
                text: nameNew
              }
            })
            nameNew = nameNew.substring(0, nameNew.length - 1)
            _this.getTianQiDdata(nameNew)
          });

          // 窗口改变 重新调用绘制地图
          //pm25、pm10、no2（二氧化氮）、so2、o3、co
          window.addEventListener('resize', () => {
            if (myChart && myChart.resize) {
              myChart.resize();
            }
          });
          // ================================================
          // console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    getTianQiDdata(address) {
      //image:https://xintai.xianguomall.com/skin/peach/bingbao.png
      axios.get('https://v1.yiketianqi.com/api', {
        params: {
          unescape: 1,
          version: 'v9',
          appid: 23035354,
          appsecret: '8YvlPNrz',
          cityid: 0,
          city: address,
          ip: '0',
          callback: 0
        }
      })
        .then(function (response) {
          console.log(response.data);
          this.pm25 = response.data.aqi.pm25
          let arrWeek = [] //得到未来7天的星期
          let tem1 = [] //最高温度
          let tem2 = [] //最低温度
          let weaImgObject = {} //存放天气及对应的图标
          let dateWork = response.data.data
          for (let i = 0; i < dateWork.length; i++) {
            arrWeek[i] = dateWork[i].week
            tem1[i] = dateWork[i].tem1
            tem2[i] = dateWork[i].tem2
            weaImgObject[dateWork[i].date] = [dateWork[i].wea, dateWork[i].wea_img]
          }
          console.log(weaImgObject)
          this.arrWork.arrWeek = arrWeek
          this.arrWork.arrTem1 = tem1
          this.arrWork.arrTem2 = tem2
          this.weaImg = weaImgObject
          this.arrRadar = [
            response.data.aqi.o3,
            response.data.aqi.co,
            response.data.aqi.no2,
            response.data.aqi.so2,
            response.data.aqi.pm25,
            response.data.aqi.pm10
          ]
          // console.log(this.arrWork.arrWeek)
        }.bind(this))
        .catch(function (error) {
          console.log(error);
        });
    }
  },

}
</script>

<style>
html,
body,
#myapp {
  height: 100%;
  margin: 0 auto;
  width: 100%;
  background-image: url(../image/bj.png);
  background-size: 100% 100%;
}

.mainDiv {
  /* border: 1px blue solid; */
  width: 100%;
  height: 100%;
}

.leftDiv {
  width: 35%;
  height: 100%;
  /* border: 1px blue solid; */
  float: left;
}

.leftTop {
  width: 98%;
  height: 50%;
  border: 0px red solid;
}

.leftBottom {
  margin-top: 6px;
  width: 98%;
  height: 50%;
  border: 0px red solid;
}

.centerDiv {
  width: 30%;
  height: 100%;
  border: 0px blue solid;
  float: left;
}

.rightDiv {
  width: 34%;
  height: 100%;
  border: 0px blue solid;
  float: left;
}

.rightTop {
  width: 100%;
  height: 50%;
  border: 0px red solid;
}

.rightBottom {
  width: 100%;
  height: 50%;
}

.mapCss {
  margin-top: 6px;
  height: 98%;
  width: 98%;
  border-radius: 10px;
  box-shadow: 0px -5px 4px 0px #2279ee,
    -6px 0px 4px 0px #2279ee,
    6px 0px 4px 0px #2279ee,
    0px 5px 4px 0px #2279ee;
}
</style>